<template>
  <div class="dailyanalytics coinrevenue-list dailyanalytics-total">
    <Row type="flex"
         justify="start"
         class="coinrevenue-list-edit">
      <Row type="flex"
           align="middle">
        <Col>
        <span>时间：</span>
        </Col>
        <Col class="concrete-data">
        <DatePicker type="date"
                    v-model="searchObj.dateTimes"
                    @on-change="seletetime"
                    :options="optionsStartTimeDay"
                    format="yyyy-MM-dd"
                    placement="bottom-end"
                    placeholder="请选择时间"
                    style="width: 180px"></DatePicker>
        </Col>
        <Row type="flex"
             align="middle"
             class="export-btn">
          <Col>
          <span>门店名称：</span>
          </Col>
          <Col>
          <!-- <vueTreeselectShop :shopList.sync="searchObj.shopId"
                             @id-change="search"
                             permissionCode="moms:report:dailysummaryanalytics"
                             v-model="testValue"></vueTreeselectShop> -->
          <vueTreeselectChoice :multiple="true"
                               ref="vueTreeselectChoice"
                               @input="handleShop"
                               @on-api-finish="apiFinish"
                               permissionCode="moms:report:dailysummaryanalytics"
                               v-model="ShopValue"></vueTreeselectChoice>
          <!-- <Select v-model="searchObj.shopId"
                  multiple
                  filterable
                  :max-tag-count="1"
                  @on-change="selectshop"
                  class="select-shop-item"
                  :max-tag-placeholder="maxTagPlaceholder">
            <Option v-for="item in shopList"
                    :value="item.shopId"
                    :key="item.shopId">{{ item.shopName }}</Option>
          </Select> -->
          </Col>
          <Col>
          </Col>
        </Row>
      </Row>
      <Row type="flex"
           align="middle">
        <Col style="padding-left:30px;">
        <Button type="primary"
                class="coinrevenue-btn"
                @click="search">查询</Button>
        <Button class="coinrevenue-btn export-btn"
                v-if="exportBtn">导出</Button>
        </Col>
      </Row>
    </Row>
    <!-- :loading="isloading" -->
    <Table stripe
           ref="rowSpanTable"
           class="table-list"
           :loading="isloading"
           :columns="columns"
           :data="resData"></Table>
    <div class="page-box"
         style="margin-top: 20px">
      <Page :total="total"
            ref="pages"
            :current.sync="searchObj.offset"
            :page-size="searchObj.limit"
            @on-change="handlePage"
            @on-page-size-change="handlePageSize"
            show-sizer
            show-total />
    </div>
  </div>
</template>
<script>
import { businessDdailyanalyticsList } from '@/api/report/business'
import { formatDate } from '@/libs/tools'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
export default {
  name: 'report_shop_dailyanalytics',
  components: { vueTreeselectChoice },
  data () {
    return {
      shopList: [],
      total: 0,
      isloading: false,
      exportBtn: false,
      spinShow: false, // loading
      ShopValue: [],
      searchObj: {
        offset: 1,
        limit: 10,
        dateTimes: formatDate(new Date(new Date().getTime() - 86400000), 'yyyy-MM-dd'),
        pageSize: 10,
        shopId: []
      },
      model10: [],
      columns: [
        { title: '门店', key: 'shopName', align: 'center', width: 185, fixed: 'left' },
        { title: '总销售额', key: 'totalSaleAmount', align: 'center', width: 150 },
        { title: '会员卡套餐消费额', key: 'memPkgSaleAmount', align: 'center', width: 150 },
        {
          title: '游戏币销售额',
          align: 'center',
          children: [
            { title: '会员', key: 'memCoinSaleAmount', align: 'center', width: 150 },
            { title: '非会员', key: 'nomemCoinSaleAmount', align: 'center', width: 150 },
            { title: '非会员券销售', key: 'nomemCouSaleAmount', align: 'center', width: 150 }
          ]
        },
        {
          title: '会员',
          align: 'center',
          children: [
            { title: '新增', key: 'memAddNum', align: 'center', width: 150 },
            {
              title: '办理率',
              key: 'memHandleRate',
              align: 'center',
              width: 150,
              render: (h, params) => {
                return h('div', [
                  h('span', {
                  }, (params.row.memHandleRate * 100).toFixed(2) + '%')
                ])
              }
            },
            { title: '单次销售额', key: 'memSaleAmount', align: 'center', width: 150 },
            { title: '消费人数', key: 'memSaleNum', align: 'center', width: 150 },
            { title: '消费次数', key: 'memSaleTimes', align: 'center', width: 150 },
            {
              title: '消费占比',
              key: 'memSaleRate',
              align: 'center',
              width: 150,
              render: (h, params) => {
                return h('div', [
                  h('span', {
                  }, (params.row.memSaleRate * 100).toFixed(2) + '%')
                ])
              }
            }
          ]
        },
        {
          title: '非会员',
          align: 'center',
          children: [
            { title: '单次消费额', key: 'nomemSaleAmount', align: 'center', width: 150 },
            { title: '消费次数', key: 'nomemSaleTimes', align: 'center', width: 150 }
          ]
        },
        {
          title: '会员单次消费额区间',
          align: 'center',
          children: [
            { title: '0-99元', key: 'consumeTimesOne', align: 'center', width: 150 },
            { title: '100-199元', key: 'consumeTimesTwo', align: 'center', width: 150 },
            { title: '200-299元', key: 'consumeTimesThree', align: 'center', width: 150 },
            { title: '300-499元', key: 'consumeTimesFour', align: 'center', width: 150 },
            { title: '500-999元', key: 'consumeTimesFive', align: 'center', width: 150 },
            { title: '1000-1999元', key: 'consumeTimesSix', align: 'center', width: 150 },
            { title: '2000元以上', key: 'consumeTimesSeven', align: 'center', width: 150 }
          ]
        }
      ],
      optionsStartTimeDay: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      resData: []
    }
  },
  mounted () {
  },
  methods: {
    seletetime (val) {
      // this.getShopDays()
    },
    handlePage (val) {
      this.searchObj.offset = val
      this.getShopDays()
    },
    handlePageSize (size) {
      this.searchObj.limit = size
      this.getShopDays()
    },
    search () {
      if (!this.searchObj.dateTimes) {
        this.$Message.error(`请选择时间`)
      } else if (!this.searchObj.shopId.length) {
        this.$Message.error(`请选择门店列表`)
      } else {
        this.searchObj.offset = 1
        this.searchObj.limit = 10
        this.getShopDays()
      }
    },
    async handleShop () {
      const ids = await this.$refs.vueTreeselectChoice.getShopId()
      this.searchObj.shopId = ids
      this.search()
    },
    apiFinish (isId) {
      if (isId) this.ShopValue = [this.$store.state.user.orgId]
    },
    // 获取店面日汇总
    getShopDays () {
      this.isloading = true
      businessDdailyanalyticsList({
        merchantId: this.$store.state.user.merchantId,
        shopIds: this.searchObj.shopId,
        startDate: formatDate(this.searchObj.dateTimes, 'yyyy-MM-dd') + ' 00:00:00',
        endDate: formatDate(new Date(new Date(this.searchObj.dateTimes).getTime() + 86400000), 'yyyy-MM-dd') + ' 00:00:00',
        limit: this.searchObj.limit,
        offset: (this.searchObj.offset - 1) * this.searchObj.limit
      }).then(res => {
        this.isloading = false
        if (res.data.status === 200) {
          this.resData = res.data.data ? res.data.data : []
          this.total = res.data.totalCount
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.dailyanalytics {
  .coinrevenue-list-edit {
    padding: 0 24px;
    height: 80px;
    .export-btn {
      margin-left: 24px;
    }
  }
}
</style>
<style lang="less">
.dailyanalytics-total {
  thead tr th {
    border-left: 1px solid #e8eaec;
  }
  thead tr:first-of-type th:first-of-type {
    border-left: none;
  }
}
.select-shop-item {
  height: 35px;
  width: 210px;
  .ivu-select-selection {
    height: 35px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ivu-tag {
    max-width: 100px;
  }
}
</style>
